<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //如何使用proxy 来实现响应式原理
    let obj = {
        name: {
            name: '小小小胖'
        },
        arr: ['撩', '小', '姐姐']
    }
    let handler = {
        // target 就是原对象 key就是当前取的是哪个值
        get(target, key) {
            if (typeof target[key] === 'object' && target[key] !== null) {
                //递归代理 只有取到相对应值得时候 才会进行代理
                return new Proxy(target[key], handler)
            }
            return Reflect.get(target, key);// target[key]
        },
        //知道这个机制 先更该索引 在更改长度
        set(target, key, value) {
            // [1,2,3].length = 4; 数组的 push 操作会先 length改变，再去增删元素
            //判断一下 当前是新增操作 还是修改操作
            let oldValue = target[key];//[1,2,3,123]
            if (!oldValue) {
                console.log('新增属性')
            } else if (oldValue !== value) {
                console.log('修改属性')
            }
            // target[key] = value;
            // Reflect.set主要解决设置时 如果设置不成功，设置不成功不会报错，如对象不可配置
            return Reflect.set(target, key, value);
        }
    }
    // 因为是代理对象，所以要用代理后返回的 proxy 对象去操作，而不是直接操作原对象
    let proxy = new Proxy(obj, handler)
    // 懒代理
    console.log(proxy.name.name = 123) //1 对象深层属性
    console.log(proxy.arr[0], proxy.arr[0] = 100, proxy.arr[0])  // 2 数组索引修改值
    console.log(proxy.xxx = 100)// 3 属性新增
    console.log(obj)
</script>
</body>
</html>